import React, { useState, useContext } from 'react'
import { Link } from "react-router-dom"
import { reqLogin } from "../../request/api"
//引入context对象
import { ReducerContext } from "../../App"
import Top from '../../components/Top/Top'
const Login = (props) => {
    //元信息
    const title = "手机登录"
    //使用状态层数据
    const [user, setUser] = useState({ phone: "", password: "" })
    //取数据
    const { dispatch, actions } = useContext(ReducerContext)
    //登录交互
    const login = () => {
        reqLogin(user).then(res => {
            if (res.data.code == 200) {
                //存用户信息
                dispatch(actions.changeInfo(res.data.list))
                props.history.push("/index/home")
            }
        })
    }
    return (
        <div>
            <Top title={title}></Top>
            <Link to="/register">去注册</Link>
            <div>
                手机号：<input type="text" value={user.phone} 
                onChange={(e)=>setUser({...user,phone:e.target.value})}
                />
            </div>
            <div>
                密码：<input type="text" value={user.password} 
                onChange={(e)=>setUser({...user,password:e.target.value})}
                />
            </div>
            <button onClick={()=>login()}>登录</button>
        </div>
    )
}

export default Login
